<template>
  <div class="bigBox">
    <!-- 搜索 -->
    <div class="search">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="设备编号: ">
          <el-input v-model="Value" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 内容 -->
    <div class="content">
      <!-- 按钮 -->
      <el-row>
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="add"
        >新建</el-button>
        <el-button type="primary" @click="WordDeploy">批量操作</el-button>
      </el-row>
      <!-- 列表 -->
      <!-- 表格 -->
      <el-table :data="roleList" @select="selectFn" @select-all="selectFnAll">
        <el-table-column prop="innerCode" type="selection" width="80" />
        <el-table-column
          label="序号"
          align="left"
          type="index"
          width="130"
        />
        <el-table-column
          label="设备编号"
          align="left"
          width="260"
          prop="innerCode"
        />
        <el-table-column
          label="设备型号"
          align="left"
          width="260"
          prop="type.name"
        />
        <el-table-column
          label="详细地址"
          align="left"
          width="260"
          prop="node.name"
        />
        <el-table-column
          label="合作商"
          align="left"
          width="260"
          prop="ownerName"
        />
        <el-table-column
          label="设备状态"
          align="left"
          width="260"
        >
          <template #default="{ row }">
            <span>{{ createType[row.vmStatus] }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180" align="left">
          <template #default="{ row }">
            <a style="color:blue" @click="viewDetails(row)">货道</a>
            <a style="margin-left:18px;color:blue" @click="tactics(row)">策略</a>
            <a style="margin-left:18px;color:blue" @click="modify(row)">修改</a>
          </template>
        </el-table-column>
      </el-table>
      <!-- 下面 -->
      <el-row class="bottom">
        <el-col :span="20">
          <div>共{{ areaList.totalCount }}条数据 第{{ areaList.pageIndex }}/{{ areaList.totalPage }}页</div>
        </el-col>
        <el-col :span="4">
          <el-button-group>
            <el-button type="warning" icon="el-icon-arrow-left" :disabled="upShow" @click="up">上一页</el-button>
            <el-button type="warning" style="margin-left:20px;" :disabled="underShow" @click="under">下一页<i class="el-icon-arrow-right el-icon--right" /></el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </div>
    <!-- 货道的弹窗 -->
    <el-dialog
      title="货道设置"
      :visible.sync="dialogVisible"
      width="55%"
      :before-close="handleClose"
    >
      <i class="el-icon-arrow-left left" @click="arrowClick('left')" />
      <i class="el-icon-arrow-right right" @click="arrowClick('right')" />
      <div class="huodao">
        <div class="title">
          <el-row>
            <el-col :span="20">
              <span>货到行数:{{ nums.vmRow }}</span>
              <span style="margin-left:40px">货到列数:{{ nums.vmCol	}}</span>
              <span style="margin-left:40px">货到容量(个):{{ nums.channelMaxCapacity	}}</span>
            </el-col>
            <el-col :span="4"><el-button type="primary" @click="Paihuo(nums)">智能排货</el-button></el-col>
          </el-row>
        </div>
        <!-- 列表内容 -->
        <div
          class="body"
          style="height:400px;overflow: scroll;"
        >

          <!-- 111  -->
          <div class="block">

            <el-carousel ref="cardShow" trigger="click" height="1200px" :autoplay="false" indicator-position="none">

              <el-carousel-item>
                <el-row>
                  <div v-for="(item,index) in goodsList" :key="index" class="frame pic">
                    <span class="ic">{{ item.channelCode }}</span>
                    <img v-if="item.sku" :src="item.sku.skuImage" alt="">
                    <img v-else src="" alt="">
                    <div v-if="item.sku">{{ item.sku.brandName }}</div>
                    <div v-else>暂无数据</div>
                    <div class="bow">
                      <span style="color:#6185ff" @click="addGoods">添加</span>
                      <span style="color:#ff6565">删除</span>
                    </div>
                  </div>
                </el-row>
                <!-- <h3 class="small">{{ item }}</h3> -->
              </el-carousel-item>
              <el-carousel-item>
                <el-row>
                  <div v-for="(item,index) in goodsListTwo" :key="index" class="frame pic">
                    <span class="ic">{{ item.channelCode }}</span>
                    <img v-if="item.sku" :src="item.sku.skuImage" alt="">
                    <img v-else src="" alt="">
                    <div v-if="item.sku">{{ item.sku.brandName }}</div>
                    <div v-else>暂无数据</div>
                    <div class="bow">
                      <span style="color:#6185ff" @click="addGoods">添加</span>
                      <span style="color:#ff6565">删除</span>
                    </div>
                  </div>
                </el-row>
                <!-- <h3 class="small">{{ item }}</h3> -->
              </el-carousel-item>
            </el-carousel>
          </div>
          <!-- 111 -->

        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="goodsSure">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增的弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="addShow"
      width="30%"
      :before-close="addShowFn"
    >
      <el-form ref="form" :model="form" :rules="forms" label-width="100px">
        <el-form-item label="设备编号:">
          <span>系统自动生成</span>
        </el-form-item>
        <el-form-item label="选择型号" prop="vmType">
          <el-select v-model="form.vmType" placeholder="请选择活动区域">
            <el-option v-for="item in vmList" :key="item.typeId" :label="item.name" :value="item.typeId" />

          </el-select>
        </el-form-item>
        <el-form-item label="选择点位" prop="nodeId">
          <el-select v-model="form.nodeId" placeholder="请选择活动区域">
            <el-option v-for="item in PTList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addShow = false">取 消</el-button>
        <el-button type="primary" @click="addSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 策略的弹出层 -->
    <el-dialog
      title="策略管理"
      :visible.sync="tacticsShow"
      width="30%"
      :before-close="tacticsShowFn"
    >
      <el-row>
        <el-col :span="12">机器编号: {{ tacticsData.innerCode }}</el-col>
        <el-col :span="12">策略名称: {{ tacticsData.policyName }}</el-col>
      </el-row>
      <div style="margin-top:15px">策略方案: {{ tacticsData.discount }}%</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消策略</el-button>
      </span>
    </el-dialog>
    <!-- 修改的弹出层 -->
    <el-dialog
      title="修改设备"
      :visible.sync="modifyShow"
      width="30%"
      :before-close="modifyShowFn"
    >
      <el-form>
        <div style="margin-top:15px">机器编号: {{ row.innerCode }} </div>
        <div style="margin-top:15px">供货时间: {{ row.lastSupplyTime }}</div>
        <div style="margin-top:15px">设备类型: 0</div>
        <!-- <div style="margin-top:15px">设备容量: {{ row.type.channelMaxCapacity }}</div> -->
        <el-form-item label="设备点位" prop="nodeId">
          <el-select v-model="form.nodeId" placeholder="请选择活动区域">
            <el-option v-for="item in PTList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <div style="margin-top:15px">合作商: {{ row.ownerName }}</div>
        <!-- <div style="margin-top:15px">所属区域: {{ row.region.name }}</div> -->
        <!-- <div style="margin-top:15px">设备地址: {{ row.node.name }}</div> -->
      </el-form>
    </el-dialog>
    <!-- 智能排货 -->
    <el-dialog
      title="智能排货"
      :visible.sync="PaihuoShow"
      width="55%"
      :before-close="PaihuoShowFn"
    >
      <div>该区域属于学校商圈适合销售一下商品</div>
      <el-row>
        <div v-for="(item,index) in topTenList" :key="index" class="zhineng">
          <img :src="item.image" alt="">
          <div>{{ item.skuName }}</div>
        </div>
      </el-row>
    </el-dialog>
    <!-- 选择策略 批量策略管理 -->
    <el-dialog
      title="批量策略管理"
      :visible.sync="strategyShow"
      width="30%"
      :before-close="strategyShowFn"
    >
      <el-form>
        <el-form-item label="选择策略" prop="nodeId">
          <el-select v-model="on.policyId" placeholder="请选择策略" style="width:450px">
            <el-option v-for="item in tList" :key="item.policyId" :label="item.policyName" :value="item.policyId" />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button type="warning" plain>取消</el-button>
        <el-button type="danger" @click="yes">确认</el-button>
      </div>
    </el-dialog>
    <!-- 货道里的添加 -->
    <el-dialog
      title="选择商品"
      :visible.sync="addGoodsShow"
      width="54%"
      :before-close="addGoodsShowFn"
    >
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="型号搜索: ">
          <el-input v-model="spValue" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="spSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <div v-for="(item,index) in addList" :key="index" class="zhineng" @click="icShow(item)">
          <img v-show="icShows === item.skuId" class="selected" style="width:30px" src="" alt="">
          <img :src="item.skuImage" alt="">
          <div>{{ item.brandName }}</div>
        </div>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { goodsSearch, applicationStrategy, tacticsList, topTen, cancelApi, tactics, addVendingMachine, pointSearch, typeList, searchMachine, addVending, typeDetails } from '@/api'
export default {
  data() {
    return {
      Checkbox: false,
      arrs: [1, 2, 3, 4, 5, 6],
      form: {
        vmType: '',
        nodeId: '',
        createUserId: 1
      },
      forms: {
        model: {
          required: true,
          message: '请选择型号',
          trigger: 'blur'
        },
        PT: {
          required: true,
          message: '请选择点位',
          trigger: 'blur'
        }
      },
      addGoodsShow: false, // 货道里的添加
      row: {},
      vmList: [], // 添加里面的售货机列表
      PTList: [], // 添加里面的点位列表
      aList: [], // 接受多选框选择的值
      tacticsData: '', // 策略的数据
      PaihuoShow: false, // 排货
      modifyShow: false, // 修改
      tacticsShow: false, // 策略
      addShow: false, // 新增弹窗
      strategyShow: false, // 策略管理
      dialogVisible: false, // 货道弹窗
      nums: {}, // 渲染详细的头部数据
      upShow: false, // 上下按钮禁用状态
      underShow: false, // 上下按钮禁用状态
      Value: '', // 搜索框绑定的值
      spValue: '', // 商品搜索
      roleList: [], // 渲染表格
      areaList: {}, // 完整的信息
      goodsList: [], // 货道详情渲染数据
      goodsListTwo: [], // 货道详情渲染数据
      topTenList: [], // 排货
      tList: [], // 策略列表
      addList: [], // 货添加的商品列表
      icShows: '', // 控制小图标的显示
      on: {
        policyId: '', // 绑定选中的策略
        innerCodeList: []
      },
      wuPic: '…f/7gKJI+RVPZb+bjKfwGFjihtQmXGoAAAAABJRU5ErkJggg==',
      createType: {
        0: '未投放',
        1: '运营',
        3: '撤机'
      }
    }
  },
  created() {
    this.publicFn()
    console.log(this.roleList)
  },
  methods: {
    arrowClick(val) {
      // 左右箭头
      if (val === 'left') {
        this.$refs.cardShow.prev()
      } else {
        this.$refs.cardShow.next()
      }
    },
    async spSubmit() {
      // 里面的查询
      // this.addGoods(this.spValue)
      const res = await goodsSearch({ pageIndex: 1, pageSize: 10, skuName: this.spValue })
      this.addList = res.data.currentPageRecords
    },
    icShow(val) {
      // 添加里的小图标
      console.log(val)
      this.icShows = val.skuId
    },
    addGoodsShowFn() {
      // 货到里的添加商品的关闭方法
      this.addGoodsShow = false
    },
    async addGoods() {
      // 货到里的添加商品
      this.addGoodsShow = true
      const res = await goodsSearch({ pageIndex: 1, pageSize: 10 })
      this.addList = res.data.currentPageRecords

      console.log(res)
    },
    selectFnAll(se) {
      this.aList = se
      console.log(se)
    },
    selectFn(se) {
      this.aList = se
      console.log(this.aList)
    },
    cli() {
      console.log(this.arrs)
    },
    async yes() {
      // 策略的确定
      console.log(this.on)
      await applicationStrategy(this.on)
      this.strategyShowFn()
      this.$message.success('策略设置成功')
      this.aList = []
    },
    strategyShowFn() {
      // 策略管理的关闭方法
      this.strategyShow = false
    },
    PaihuoShowFn() {
      // 排货的关闭方法
      this.PaihuoShow = false
    },
    async Paihuo(num) {
      console.log(num)
      this.PaihuoShow = true
      // 智能排货
      const { data } = await topTen(this.row.businessId)
      this.topTenList = data
      console.log(data)
    },
    modify(row) {
      // 修改
      console.log(row)
      this.row = row
      this.modifyShow = true
      this.PTLists()
    },
    modifyShowFn() {
      // 修改的关闭方法
      this.modifyShow = false
    },
    async cancel() {
      // 取消策略
      this.$confirm('真的要取消吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await cancelApi(this.row.innerCode, this.tacticsData.policyId)
        // 提示用户
        this.$message.success('取消成功')
        this.tacticsShowFn()
      }).catch(error => {
        console.log(error)
      })
    },
    tacticsShowFn() {
      // 策略的关闭
      this.tacticsShow = false
    },
    async tactics(row) {
      this.row = row
      console.log(row)
      // 策略
      const { data } = await tactics(row.innerCode)
      if (data) {
        this.tacticsData = data
        this.tacticsShow = true
        console.log(data)
      } else {
        this.strategyShow = true
        const res = await tacticsList()
        this.tList = res.data
        this.on.innerCodeList = [row.innerCode]
        // console.log(res)
      }
    },
    addSubmit() {
      // 新增的确认
      this.$refs.form.validate(async(valid) => {
        if (!valid) return
        await addVendingMachine(this.form)
        this.$message.success('添加成功')
        this.addShowFn()
      })
    },
    goodsSure() {
      // 货到的确定
    },
    handleClose() {
      // 货到的关闭方法
      this.dialogVisible = false
    },
    async viewDetails(row) {
      // 货道
      this.row = row
      console.log(row)
      this.dialogVisible = true
      const res = await typeDetails(row.type.typeId)
      this.nums = res.data
      // console.log(res)
      const { data } = await addVending(row.innerCode)
      // console.log(data)
      data.forEach(item => {
        if (item.channelCode.split('-')[1] > 5) {
          this.goodsListTwo.push(item)
        } else {
          this.goodsList.push(item)
        }
      })
      // this.goodsList = data
      // console.log(data)
    },
    onSubmit() {
    // 查询按钮
      this.publicFn('', '', '', this.Value)
    },
    addShowFn() {
      // 新增的关闭方法
      this.addShow = false
    },
    async add() {
      // 新建 添加 按钮
      this.addShow = true
      const { data } = await typeList({ pageIndex: 1, pageSize: 10000 })
      this.vmList = data.currentPageRecords
      this.PTLists()
    },
    async PTLists() {
      // 点位列表方法
      const res = await pointSearch({ pageIndex: 1, pageSize: 10000 })
      console.log(res)
      this.PTList = res.data.currentPageRecords
    },
    async WordDeploy() {
      // 批量操作
      if (this.aList[0]) {
        this.strategyShow = true
        this.aList.forEach(item => {
          this.on.innerCodeList.push(item.innerCode)
        })
        this.strategyShow = true
        const res = await tacticsList()
        this.tList = res.data
        // console.log(0)
        // this.tactics()
      } else {
        this.$message.success('请勾选')
      }
      // console.log(this.arrs)
      // console.log(this.on.innerCodeList)
    },
    // 公共调用的方法
    async publicFn(pageIndex, pageSize, status, innerCode) {
      const { data } = await searchMachine({ pageIndex: pageIndex, pageSize: pageSize, status: status, innerCode: innerCode })
      this.areaList = data
      this.roleList = data.currentPageRecords
      // console.log(this.roleList)
      if (data.pageIndex <= 1) {
        this.upShow = true
      } else {
        this.upShow = false
      }
      if (data.pageIndex === data.totalPage) {
        this.underShow = true
      } else {
        this.underShow = false
      }
    },
    up() {
      // 上一页
      this.publicFn(+this.areaList.pageIndex - 1, this.areaList.pageSize)
    },
    under() {
      // 下一页
      this.publicFn(+this.areaList.pageIndex + 1, this.areaList.pageSize, '', '')
    }
  }
}
</script>
<style lang="scss" scoped>
  .bigBox {
  padding: 20px;

  .search {
    background-color: #fff;
    padding: 10px;
    padding-bottom: 0px;
  }
}
.content {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px;
  }
  .bottom {
  margin-top: 30px;
}
.huodao {
  padding: 20px;
  .title {
    margin-top: -20px;
    // height: 50px;
    padding: 5px;
    border-radius: 7px;
    padding-left: 20px;
    width: 100%;
    background-color: #f3f6fb;
    line-height: 50px;
  }
 .pic {
      position: relative;
      margin-bottom: 10px;
      text-align: center;
      margin-top: 10px;
      // padding: 5px;
      margin-left: 20px;
      background-color: #f6f7fb;
      .ic{
  position: absolute;
    top: 10px;
    left: 0px;
    width: 43px;
    height: 23px;
    line-height: 23px;
    background: #829bed;
    border-radius: 0 10px 10px 0;
    font-size: 12px;
    color: #fff;
      }
      img {
        display: inline-block;
        width: 84px;
        height: 78px;
        margin-bottom: 10px;
        object-fit: contain;
      }
    }
}
.bow {
  margin-top: 10px;
  height: 50px;
  background-color: #fff;
  span {
    margin: 5px;
    line-height: 50px;
  }
}
.frame {
  display: inline-block;
  width: 165px;
  box-shadow:3px 3px 5px 2px #f3f3f3 ;
}
.zhineng{
    display: inline-block;
    width: 165px;
    box-shadow:3px 3px 5px 2px #f3f3f3 ;
    position: relative;
      margin-bottom: 10px;
      text-align: center;
      margin-top: 10px;
      // padding: 5px;
      margin-left: 20px;
      background-color: #f6f7fb;
  img{
       display: inline-block;
        width: 84px;
        height: 78px;
        margin-top: 20px;
        margin-bottom: 15px;
        object-fit: contain;
  }
}
.btn {
  text-align: center;
}
.selected{
  z-index: 9999999;
  display: inline-block;
  position: absolute;
    top: -40px;
    left: 0;
    width: 36px;
    height: 36px;
    font-size: 14px;
}
.left{
  position: relative;
  top: 200px;
  left: -10px;
  font-size: 60px;
}
.right{
  float: right;
  position: relative;
  top: 200px;
  right: -20px;
  // left: 420px;
  font-size: 60px;

}
</style>
